<template>
    <div>
        <p v-if="!empty"><button class="article-btn" @click="processAll()">全部{{action}}</button></p>
        <transition-group v-if="!empty" name="article" tag="div" class="articles"
            leave-active-class="processing article-leave-active">
            <p v-for="article in articles" class="article" :key="article.id">
                <button v-text="action" @click="go('process', article.id, $event)" class="article-btn"></button>
                <button @click="go('ignore', article.id, $event)" class="article-btn">忽略</button>
                <a :href="article.href" v-text="article.title" :title="article.title" class="article-link" target="_blank"></a>
            </p>
        </transition-group>
        <p v-else class="two-poems" key="poem">苟利国家生死以&#10;岂因祸福避趋之</p>
    </div>
</template>
<style lang="less">
    *, *:before, *:after {
        font: 400 16px/1.618 PingHei,"Microsoft Yahei","Noto Sans CJK SC",sans-serif,Emoji,'Segoe UI Symbol';
        box-sizing: border-box;
        outline: none;
    }

    .article {
        margin: 3px 0;
        white-space: nowrap;
        max-height: 80px;
        transition: max-height .5s;
    }

    .article.article-leave-active {
        overflow: hidden;
        max-height: 0;

        &:after {
            content: '😊';
            font-size: 16px;
            line-height: 16px;
            border: none;
            animation: none;
        }
    }

    .article-btn {
        border-radius: 5px;
        padding: 0px 8px;
        color: #528fcc;
        background: #fff;
        border: 1px solid #528fcc;
        transition: .1s;

        &:hover {
            background: #528fcc;
            color: #fff;
        }

        &:active {
            transform: scale(1.1);
        }
    }

    .article-link {
        display: inline-block;
        max-width: 540px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #3E62A6;
        vertical-align: top;

        &:hover {
            color: #C00;
        }
    }

    .processing {
        position: relative;

        > .article-btn, > .article-link {
            filter: blur(1px);
        }

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
        }

        &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: 50%;
            animation: scale .75s ease-in infinite;
            z-index: 4;
            width: 16px;
            height: 16px;
            border: 2px solid #528fcc;
            border-radius: 50%;
        }
    }

    @keyframes scale {
        0% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) scale(.5);
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .two-poems {
        writing-mode: vertical-rl;
        white-space: pre-wrap;
        width: ~"calc(1.618em * 2)";
        height: 7em;
        margin: 0;
        font: bold 48px/1.618 BiauKai,STKaiti,KaiTi_GB2312,DFKai-SB,KaiTi;
        text-align: end;
    }
</style>
<script>
    import { MessageRouter } from '../util'

    let messageRouter = new MessageRouter()

    export default{
        data() {
            return {
                isAdmin: false,
                articles: {}
            }
        },
        computed: {
            empty() {
                return Object.keys(this.articles).length === 0
            },
            action() {
                return this.isAdmin ? '删除' : '举报'
            }
        },
        methods: {
            go(what, id, event) {
                event.target.parentElement.classList.add('processing')
                chrome.runtime.sendMessage({
                    route: `background/${what}`,
                    data: id
                })
            },
            processAll() {
                Array.from(document.querySelectorAll('.articles .article-btn')).forEach(btn => btn.click())
            }
        },
        created() {
            let $vm = this

            chrome.runtime.sendMessage({
                route: 'background/stat'
            }, res => {
                this.isAdmin = res.isAdmin
                this.articles = res.pending
            })

            messageRouter.register({
                popup: {
                    pending(pending) {
                        $vm.articles = pending
                    }
                }
            })
        }
    }
</script>
